<template>
  <div>

    <template>
      <!-- 搜索框 -->
      <form class="el-form el-form--inline" v-if="formDisplay">
        <div class="search-container">

          <div class="el-form-item el-form-item--medium">
            <label for="status" class="el-form-item__label">访客姓名</label>
            <div class="el-form-item__content">
              <el-input v-model="ZyVisitor.visitorName" placeholder="请输入访客姓名"/>
            </div>
          </div>

          <label for="postCode" class="el-form-item__label">访客手机号</label>
          <div class="el-form-item__content">
            <el-input v-model="ZyVisitor.visitorPhoneNumber" placeholder="请输入访客手机号"/>
          </div>

          <div class="block">
            <span class="demonstration">到访时间</span>
            <el-date-picker
                v-model="ZyVisitor.visitorDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择到访时间">
            </el-date-picker>
          </div>

          <!--操作按钮-->
          <div class="el-form-item el-form-item--medium">
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="interface(1)">搜索</el-button>
              <!-- 重置按钮 -->
              <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
              <el-button type="warning" @click="exportExcel"><i class="el-icon-download"></i>导出</el-button>
            </div>
          </div>
        </div>
      </form>
    </template>

    <!-- 隐藏按钮 -->
    <el-tooltip content="隐藏" placement="top">
      <el-button icon="el-icon-search" circle @click="hide" class="search-button"></el-button>
    </el-tooltip>

    <!-- 重置按钮 -->
    <el-tooltip content="重置" placement="top">
      <el-button icon="el-icon-refresh" circle @click="reset" class="search-button"></el-button>
    </el-tooltip>

    <!--界面-->
    <el-table
        ref="multipleTable"
        :data="ZyVisitors"
        tooltip-effect="dark"
        style="width: 100%">

      <el-table-column
          label="序号"
          width="100"
          align="center">
        <template slot-scope="scope">
          {{ computeIndex(scope.$index) }}
        </template>
      </el-table-column>

      <el-table-column
          prop="visitorName"
          label="访客姓名"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="visitorPhoneNumber"
          label="访客手机号"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="zyCommunity.communityName"
          label="小区名称"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="visitorDate"
          label="到访时间"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="remark"
          label="备注"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          label="操作"
          width="200"
          align="center">
        --
      </el-table-column>

    </el-table>

    <!--分页-->
    <div class="block">
      <!--分页-->
      <el-pagination
          background
          :total="total"
          @size-change="sizeTo" @current-change="interface"
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[5,10, 20, 30, 50]"
          style="float: right"/>
      <div style="clear: both"/><!--清除浮动-->
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    // 计算真实的序号
    computeIndex() {
      return (index) => {
        // 根据当前页数、每页条数和数据的索引计算真正的序号
        // return (this.ZyVisitor.current - 1) * this.ZyVisitor.size + index + 1;
        return (this.ZyVisitor.current - 1) * this.ZyVisitor.size + index + 1;
      };
    },
  },
  data() {
    return {
      ZyVisitors: [],
      formDisplay: true,
      ZyVisitor: {
        current: 1,
        size: 5,
        visitorName: "",
        visitorPhoneNumber: "",
        visitorDate: null,
      },
      pages: 1,
      total: 1,
    }
  },
  methods: {
    interface(current) {
      this.ZyVisitor.current = current;
      this.$axios.get('/ZyVisitor/findZyVisitor', {params: this.ZyVisitor})
          .then(result => {
            if (result.data.data) {
              this.ZyVisitors = result.data.data.records
              this.pages = result.data.data.pages
              this.total = result.data.data.total
              console.log(this.ZyVisitors)
            }
          })
    },
    //更改每页条数
    sizeTo(size) {
      this.ZyVisitor.size = size;
      this.interface(1);
    },
    // 折叠隐藏查询框
    hide() {
      this.formDisplay = !this.formDisplay
    },
    // 刷新
    reset() {
      this.ZyVisitor = {
        current: 1,
        size: 5,
        visitorName: "",
        visitorPhoneNumber: "",
        visitorDate: ""
      }
      this.interface(1)
    },
    // 导出Excel
    exportExcel() {
      // 显示加载状态
      const loadingInstance = this.$loading({
        lock: true,
        text: '导出中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$confirm(`是否确认导出所有岗位数据项?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定时的操作
        this.$axios.get('/ZyVisitor/exportZyVisitor', {responseType: 'blob'})
            .then(result => {
              // 关闭加载状态
              loadingInstance.close();

              // 检查是否有返回数据
              if (result.data) {
                // 创建Blob对象
                const blob = new Blob([result.data]);

                // 创建下载链接
                const link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);

                // 设置下载文件的名称
                link.download = '岗位数据.xlsx';

                // 模拟点击下载
                link.click();
              } else {
                // 处理没有返回数据的情况
                this.$message.warning('导出失败：未收到文件数据');
              }
            })
            .catch(error => {
              // 关闭加载状态
              loadingInstance.close();

              // 处理错误
              console.error('导出失败', error);
              this.$message.error('导出失败：' + error.message);
            });
      }).catch(() => {
        // 用户点击取消时的操作
        // 关闭加载状态
        loadingInstance.close();
      });
    }
  },
  mounted() {
    this.interface(1)
  }
}
</script>


<style>

</style>
